<% layout('/layouts/default.html', {title: '拆而未尽', libs: ['dataGrid']}){ %>
<style>
  .bindOne {
    border-radius: 4px;
    margin: 0px 5px 10px 5px;
    height: 300px;
    text-align: center;
    background: #fff;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .BoxTitAll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 15%;
    height: 40px;
  }
  .tabBody li {
    display: inline-block;
    margin-right: 20px;
    font-size: 14px;
  }
  .tabActive {
    color: #1f69e6;
    border-bottom: 2px solid #1f69e6;
  }
  .defaultColor_text {
    font-size: 14px;
    margin: 0 8px;
    color: #000000;
    line-height: 40px;
    height: 40px;
  }
  .handTable {
    width: 100%;
    height: 85%;
  }
  .col-md-6,
  .col-md-4,
  .col-md-8 {
    padding: 5px 10px 0px 2px !important;
  }

  .jqgridborder {
    border-bottom: 1px dashed #ccc !important;
  }

  .ui-jqgrid .ui-priority-secondary {
    background: white !important;
  }

  .ui-row-ltr {
    border: 0px !important;
  }

  #gview_noticeNotice .ui-jqgrid-hbox {
    display: none;
  }

  #gbox_noticeNotice {
    border: none;
  }

  #gview_todolist .ui-jqgrid-hbox {
    display: none;
  }

  #gbox_todolist {
    border: none;
  }

  #todolist tr td {
    border: none;
    border-bottom: 1px dashed #ccc;
  }

  #noticeNotice tr td {
    border: none;
  }

  #noticeNotice tr td {
    border-bottom: 1px dashed #ccc;
  }

  .jqgfirstrow td {
    border-bottom: none !important;
  }

  #taskAlertInformationDataGrid tr {
    cursor: pointer;
  }

  #noticeNotice tr {
    cursor: pointer;
  }

  #todolist tr {
    cursor: pointer;
  }

  #noticeNotice tr:hover {
    text-decoration: underline;
    color: rgb(31, 105, 230);
  }

  #todolist tr:hover {
    text-decoration: underline;
    color: rgb(31, 105, 230);
  }
  /*全市概况*/
  .handZong {
    width: 100%;
    line-height: 50px;
    padding-left: 10px;
    padding-bottom: 10px;
  }
  .handZong p {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
  }
  .handZong p span {
    display: inline-block;
    padding-right: 10px;
  }
  .handZong p span b {
    display: inline-block;
    padding: 0px 20px;
  }
  .blue {
    color: #0066cc;
  }
  .green {
    color: #008a00;
  }
  .red {
    color: #e60000;
  }
  .bindQuan {
    border-radius: 4px;
    margin: 0px 5px 16px 5px;
    text-align: center;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
  }
  .bindge {
    border-radius: 4px;
    margin: 0px 5px 16px 5px;
    text-align: center;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    /*height: 410px;*/
  }
  .jingTitle {
    line-height: 100px;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    background: #ffffff;
    margin-bottom: 16px;
  }
  .conceptList li {
    width: 50%;
    float: left;
    font-size: 20px;
    font-weight: bold;
    list-style: none;
    text-align: left;
    line-height: 50px;
    color: #cccccc;
  }
</style>
<div class="content pb0">
  <div class="box box-main">
    <div class="box-header">
      <ul class="nav nav-tabs bangPing-tabs">
        <li><a href="${ctx}/dataview/dcSupImportData/pageOne">${text('专项统计')}</a></li>
        <li class="active"><a href="${ctx}/dataview/dcSupImportData/pageTwo">${text('数据分析')}</a></li>
        <li><a href="${ctx}/dataview/dcSupImportData/pageThree">${text('各区对比')}</a></li>
        <% if(hasRole('data_board_import') || @UserUtils.getUser().getUserCode() == 'system'){ %>
          <li><a href="${ctx}/dataview/dcSupImportData/list">${text('数据导入')}</a></li>
        <% } %>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">无进展项目</h1>
        </div>
        <div class="handTable">
          <table id="households"></table>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">已完成未净地</h1>
        </div>
        <div class="handTable">
          <table id="households2"></table>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">难点问题排名top10</h1>
        </div>
        <div class="handTable" id="difficultEchart"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">按当前完成速度预测任务进展</h1>
        </div>
        <div class="handTable" id="progressEchart"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">
            每周进展较慢项目（周速度=近7天完成户数/7天）
          </h1>
        </div>
        <div class="handTable" id="advanceEchart"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">未完成户数排名</h1>
        </div>
        <div class="handTable" id="incompleteEchart"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">完成率较低项目排序</h1>
        </div>
        <div class="handTable">
          <table id="households3"></table>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">已净地项目</h1>
        </div>
        <div class="handTable">
          <table id="households4"></table>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">大项目户数排名TOP10</h1>
        </div>
        <div class="handTable" id="majorEchart"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="bindge" style="height: 440px">
        <div class="BoxTitAll">
          <h1 class="defaultColor_text">
            每周推进较快项目（周速度=近7天完成户数/7天）
          </h1>
        </div>
        <div class="handTable" id="fasterEchart"></div>
      </div>
    </div>
  </div>
</div>
<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
  var difficultEchart,
    progressEchart,
    advanceEchart,
    incompleteEchart,
    majorEchart,
    fasterEchart;
  $(function () {
    window.addEventListener("resize", () => {
      difficultEchart.resize();
      progressEchart.resize();
      advanceEchart.resize();
      incompleteEchart.resize();
      majorEchart.resize();
      fasterEchart.resize();
    });
  });

 //   无进展项目无进展项目
$('#households').dataGrid({
	url:"${ctx}/dataview/dcSupImportDataTwo/query1",
	sortableColumn: false, // 列表不允许排序
	autoGridHeight: function(){
		return $('.handTable').height()-50;
	},
	showRownum: false,
	emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
	emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>',
	columnModel: [
	    {header:'${text("项目名称")}', name:'c4',  width:150, align:"center"},
	    {header:'${text("区县")}', name:'c2',  width:150, align:"center"},
		{header:'${text("日期")}', name:'c28Str', width:150, align:"center",},
		{header:'${text("无进展天数")}', name:'param1',  width:150, align:"center"},
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){

	},

});
 //   已完成未净地
 $('#households2').dataGrid({
	url:"${ctx}/dataview/dcSupImportDataTwo/query2",
	sortableColumn: false, // 列表不允许排序
	autoGridHeight: function(){
		return $('.handTable').height()-50;
	},
	showRownum: false,
	emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
	emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>',
	columnModel: [
	    {header:'${text("项目名称")}', name:'c4',  width:150, align:"center"},
	    {header:'${text("区县")}', name:'c2',  width:150, align:"center"},
		{header:'${text("日期")}', name:'c28Str', width:150, align:"center",},
		{header:'${text("完成天数")}', name:'param1',  width:150, align:"center"},
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){

	},

});
	// 难点问题排名top10
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportData/query3",
	success:function(res){
		getDifficultEchart(res)
	}
});
// 按当前完成速度预测任务进展
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportDataTwo/query4",
	success:function(res){
		getProgressEchart(res)
	}
});
// 每周进展较慢项目（周速度=近7天完成户数/7天）
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportDataTwo/query5",
	success:function(res){
		getAdvanceEchart(res)
	}
});
//未完成户数排名
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportDataTwo/query6",
	success:function(res){
		getIncompleteEchart(res)
	}
});
 //   完成率较低项目排序
 $('#households3').dataGrid({
	url:"${ctx}/dataview/dcSupImportDataTwo/query7",
	sortableColumn: false, // 列表不允许排序
	autoGridHeight: function(){
		return $('.handTable').height()-50;
	},
	showRownum: false,
	emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
	emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>',
	columnModel: [
	    {header:'${text("项目名称")}', name:'c4',  width:150, align:"center"},
	    {header:'${text("区属")}', name:'c2',  width:150, align:"center"},
		{header:'${text("完成率（%）")}', name:'param9',  width:150, align:"center"},
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){

	},

});
 //   已净地项目
 $('#households4').dataGrid({
	url:"${ctx}/dataview/dcSupImportDataTwo/query8",
	sortableColumn: false, // 列表不允许排序
	autoGridHeight: function(){
		return $('.handTable').height()-50;
	},
	showRownum: false,
	emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
	emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>',
	columnModel: [
	    {header:'${text("项目名称")}', name:'c4',  width:150, align:"center"},
	    {header:'${text("区属")}', name:'c2',  width:150, align:"center"},
		{header:'${text("完成日期")}', name:'c28Str',  width:150, align:"center"},
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){

	},

});
// 大项目户数排名TOP10
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportDataTwo/query9",
	success:function(res){
		getMajorEchart(res)
	}
});
// 每周推进较快项目（周速度=近7天完成户数/7天）
$.ajax({
	type: 'get',
	url: "${ctx}/dataview/dcSupImportDataTwo/query10",
	success:function(res){
		getFasterEchart(res)
	}
});
  function getDifficultEchart(item) {
    difficultEchart = echarts.init(
      document.getElementById("difficultEchart"),
      "default"
    );
    difficultEchart.setOption({
      tooltip: {
        trigger: "item",
      },
      color: ["#509AF2"],
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: item.nameList,
      },
      series: [
        {
          data: item.valueList,
          type: "bar",
          name: "Email",
        },
      ],
    });
  }
  //按当前完成速度预测任务进展progressEchart

  function getProgressEchart(item) {
    progressEchart = echarts.init(
      document.getElementById("progressEchart"),
      "default"
    );
    progressEchart.setOption({
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["镜湖区", "鸠江区", "弋江区","三山经济开发区",],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: item.nameListjinhu,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "镜湖区",
          type: "line",
          stack: "Total",
          data: item.valueListjinhu,
        },
        {
          name: "鸠江区",
          type: "line",
          stack: "Total",
          data: item.valueListjiujiang,
        },
        {
          name: "弋江区",
          type: "line",
          stack: "Total",
          data: item.valueListyijiang ,
        },
        {
          name: "三山经济开发区",
          type: "line",
          stack: "Total",
          data: item.valueListsanshan,
        },
      ],
    });
  }

  //advanceEchart
  // 每周进展较慢项目（周速度=近7天完成户数/7天）

  function getAdvanceEchart(item) {
    advanceEchart = echarts.init(
      document.getElementById("advanceEchart"),
      "default"
    );
    advanceEchart.setOption({
      tooltip: {
        trigger: "item",
      },
      color: ["#FFA223"],
	  grid: {
		left: '25% '
		},
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: item.nameList,
		// axisLabel : {//坐标轴刻度标签的相关设置。
		// 	interval:0,
		// 	rotate:"45"
		// }  
      },
      series: [
        {
          data: item.valueList,
          type: "bar",
        },
      ],
    });
  }
  //incompleteEchart  未完成户数排名

  function getIncompleteEchart(item) {
    incompleteEchart = echarts.init(
      document.getElementById("incompleteEchart"),
      "default"
    );
    incompleteEchart.setOption({
      tooltip: {
        trigger: "item",
      },
      color: ["#509AF2"],
	  grid: {
		bottom: '32% '
		},
	  yAxis: {
        type: "value",
      },
      xAxis: {
        type: "category",
        data: item.nameList,
		axisLabel : {//坐标轴刻度标签的相关设置。
			interval:0,
			rotate:"50"
		},

      },
      series: [
        {
          data: item.valueList,
          type: "bar",
        },
      ],
    });
  }
  //majorEchart  大项目户数排名TOP10
 
  function getMajorEchart(item) {
    majorEchart = echarts.init(
      document.getElementById("majorEchart"),
      "default"
    );
    majorEchart.setOption({
      tooltip: {
        trigger: "item",
      },
      color: ["#FFA223"],
	  grid: {
		bottom: '32% '
		},
      xAxis: {
        type: "category",
        data: item.nameList,
		axisLabel : {//坐标轴刻度标签的相关设置。
			interval:0,
			rotate:"45"
		},
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: item.valueList,
          type: "bar",
        },
      ],
    });
  }
  //fasterEchart  每周推进较快项目（周速度=近7天完成户数/7天）
 
  function getFasterEchart(item) {
    fasterEchart = echarts.init(
      document.getElementById("fasterEchart"),
      "default"
    );
    fasterEchart.setOption({
      tooltip: {
        trigger: "item",
      },
      color: ["#509AF2"],
	  grid: {
		left: '25% '
		},
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: "category",
        data: item.nameList,
		// axisLabel : {//坐标轴刻度标签的相关设置。
		// 	interval:0,
		// 	rotate:"45"
		// },
      },
      series: [
        {
          data: item.valueList,
          type: "bar",
        },
      ],
    });
  }
</script>
